import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sports_new/resources/colours.dart';
import 'package:sports_new/utils/utils.dart';
import 'package:sports_new/utils/widget_utils.dart';
import 'package:sports_new/widgets/card.dart';
import 'package:sports_new/widgets/tip_widget.dart';

import '../../../controller/pick/subs_detail_logic.dart';
import '../../../entity/home/subs_list_entity.dart';
import '../../../resources/styles.dart';
import '../../../widgets/base/qkd_text.dart';
import '../../../widgets/base/qkd_button.dart';
import '../items/avator_label.dart';

class SubsPayPage extends StatefulWidget {
  const SubsPayPage({super.key});

  @override
  State<SubsPayPage> createState() => _SubsPayPageState();
}

class _SubsPayPageState extends State<SubsPayPage> {
  final SubsDetailLogic logic = Get.put(SubsDetailLogic());
  @override
  Widget build(BuildContext context) {
    return GetBuilder<SubsDetailLogic>(builder: (logic) {
      return Container(
        color: Colours.greyF2F3F7,
        child: Stack(
          children: [
            Positioned(
                top: 0,
                child: Image.asset(
                    width: Get.width,
                    fit: BoxFit.fitWidth,
                    Utils.getImgPath("subscribe_background.png"))),
            Column(
              children: [
                Styles.appBar(
                    backgroundColor: Colours.transparent,
                    title: QkdText("${logic.entity?.name ?? ""}专享服务"),
                    titleTextStyle: const TextStyle(
                        color: Colours.brown6A3313,
                        fontSize: 18,
                        fontWeight: FontWeight.w500)),
                Expanded(
                  child: SingleChildScrollView(
                    physics: const ClampingScrollPhysics(),
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 140),
                      child: Column(
                        children: [
                          Block(
                              cardStyle: const CardStyle(
                                  margin:
                                      EdgeInsets.fromLTRB(12, 20, 12, 0),
                                  padding: EdgeInsets.all(16)),
                              child: _expertInfo()),
                          Block(
                              cardStyle: const CardStyle(
                                  margin:
                                      EdgeInsets.fromLTRB(12, 10, 12, 0),
                                  padding: EdgeInsets.symmetric(
                                      horizontal: 10, vertical: 12)),
                              child: _subscribeChoice()),
                          if (logic.tip != null)
                            Block(
                                cardStyle: const CardStyle(
                                    margin: EdgeInsets.fromLTRB(
                                        12, 10, 12, 0),
                                    padding: EdgeInsets.fromLTRB(
                                        12, 12, 12, 20)),
                                child: _notice())
                        ],
                      ),
                    ),
                  ),
                )
              ],
            ),
            Positioned(bottom: 0, left: 0, right: 0, child: _payBar())
          ],
        ),
      );
    });
  }

  Widget _expertInfo() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        AvatarLabel.tag(
            avatarSize: 52,
            nameSize: 16,
            nameWeight: FontWeight.w500,
            avatarUrl: logic.entity?.logo,
            id: logic.entity?.expertId,
            name: logic.entity?.name,
            index: "dingyue",
            tagList: logic.entity?.tags?.split(",")),
        Container(height: 8),
        QkdText(
          "简介：${logic.entity?.info ?? ""}",
          maxLines: 3, fontSize: 12, color: Colours.grey66,
        )
      ],
    );
  }

  Widget _subscribeChoice() {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      QkdText("专家订阅权益",
        fontSize: 16,
        fontWeight: FontWeight.w500,
        color: Colours.brown6A3313
      ).center,
      Container(height: 24),
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: List.generate(3, (index) => Expanded(child: _benefit(index))),
      ),
      Container(height: 20),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: List<Widget>.generate(
            3, (index) => Expanded(child: _price(index))
        ).insertWith(1, [Container(width: 7)]
        ).insertWith(3, [Container(width: 7)]),
      ),
      Container(height: 10)
    ]);
  }

  Widget _notice() {
    return Column(
      children: [
        QkdText("订阅须知",
          fontSize: 16,
          fontWeight: FontWeight.w500,
          color: Colours.brown6A3313
        ),
        Container(height: 16),
        const TipWidget(
          type: "subs_detail",
          fontSize: 14,
          lineHeight: 1.6,
          textColor: Colours.grey66
        )
      ],
    );
  }

  Widget _payBar() {
    SubsPrices? price = logic.entity?.subsPrices?[logic.priceIndex];
    return Column(
      children: [
        // Container(
        //   padding: const EdgeInsets.symmetric(vertical: 6,horizontal: 16),
        //   decoration: BoxDecoration(
        //       color: Colors.white,
        //       border: Border.symmetric(horizontal: BorderSide(color: Colours.greyEE,width: 0.5))
        //   ),
        //   child: Row(
        //     children: [
        //       Image.asset(
        //           width: 15,
        //           Utils.getImgPath("triangle_alert.png")),
        //       Container(width: 10),
        //       QkdText("这是提示",
        //           style: TextStyle(color: Colours.grey99,fontSize: 10))
        //     ],
        //   ),
        // ),
        Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            border: Border(top: BorderSide(color: Colours.greyEE,width: 0.5))
          ),
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
          child: Row(
            children: [
              QkdText(
                price?.needPrices == "0球币" ? "限时免费" : (price?.needPrices ?? "").changeUnit,
                fontSize: 16,
                color: Colours.brown6A3313,
                fontWeight: FontWeight.w500
              ),
              Container(width: 4),
              if (price?.needPrices != price?.prices && price?.prices != null)
                QkdText((price?.prices ?? "").changeUnit,
                  fontSize: 12,
                  decoration: TextDecoration.lineThrough,
                  color: Colours.grey99
                ),
              const Spacer(),
              QkdButton(
                width: 108,
                height: 40,
                onPressed: () {
                  Utils.onEvent(
                    'expert_subscribe_pay',
                    params: {"expert_id": logic.entity?.expertId}
                  );
                  if (price?.needPrices.noValue != true) {
                    logic.toPay(price!.needPrices!,price.type ?? 0);
                  }
                },
                borderRadius: 20,
                backgroundColor: Colours.goldF8D486,
                foregroundColor: Colours.brown6A3313,
                text: "立即支付",
                textStyle:
                    const TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
              )
            ],
          ),
        ),
        Container(
            color: Colours.white, height: MediaQuery.of(context).padding.bottom)
      ],
    );
  }

  Widget _benefit(int index) {
    return Column(
      children: [
        ClipOval(
            child: Image.asset(
                width: 40, Utils.getImgPath(logic.benefitIcons[index]))),
        QkdText(logic.benefitNames[index],
          fontWeight: FontWeight.w600,
          textAlign: TextAlign.center
        ).paddingOnly(top: 4, bottom: 2),
        QkdText(logic.benefits[index].changeUnit,
          fontSize: 12, color: Colours.grey99,
          textAlign: TextAlign.center
        )
      ],
    );
  }

  Widget _price(int index) {
    var price = logic.entity?.subsPrices?[index];
    var align = Alignment.center;
    if (index == 0) align = Alignment.centerLeft;
    if (index == 2) align = Alignment.centerRight;
    return GestureDetector(
      onTap: () => logic.priceIndex = index,
      child: Container(
        alignment: align,
        height: 128,
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(
          color: logic.priceIndex == index
            ? Colours.goldFBE7BA
            : Colours.white,
          border: logic.priceIndex != index
            ? Border.all(
                color: Colours.greyEE,
                width: 0.5,
                strokeAlign: BorderSide.strokeAlignOutside)
            : null,
          borderRadius: BorderRadius.circular(10)),
        child: Column(
          children: [
            Container(
                width: Get.width,
                height: 28,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    color: logic.priceIndex == index
                        ? Colours.goldF8D486
                        : Colours.goldFFFBF2,
                    border: logic.priceIndex != index
                        ? const Border(
                            bottom: BorderSide(color: Colours.greyEE, width: 0.5))
                        : null),
                child: QkdText(price?.timeDay ?? "")
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(height: 16),
                  Text.rich(
                      TextSpan(
                          style: const TextStyle(
                              fontWeight: FontWeight.w500,
                              fontSize: 20,
                              color: Colours.brown6A3313
                          ),
                          children: [
                            TextSpan(
                                text: price?.needPrices?.split("球币").join() ?? ""),
                            TextSpan(
                                text: "球币".changeUnit,style: const TextStyle(fontSize: 12))
                          ]
                      )
                  ),
                  if(price?.min.hasValue == true)
                  Container(
                    margin: const EdgeInsets.only(top: 10),
                    padding: const EdgeInsets.symmetric(horizontal: 6,vertical: 2),
                    decoration: BoxDecoration(
                      color: price?.min.noValue == true
                        ? Colours.transparent
                        : Colours.goldFFF4DB,
                      borderRadius: BorderRadius.circular(15)),
                    child: QkdText((price?.min ?? "").changeUnit,
                      needCenter: true,
                      fontSize: 10,color: Colours.grey66
                    )
                  ),
                  Flexible(child: Container(height: 36))
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
